
<?php
for ($i=1; $i<=$defaultUploadFields; ++$i):
?>
    <p class="<?php echo $i; ?>">
        <span><?php echo Util::t("Upload Image "); ?></span><span><?php  echo $i." :"; ?></span>
        <input type="file" name="images[]" id="<?php echo 'image_'.$i ?>" />
        <span><a href="javascript:void(0)" class="delete-upload" id="<?php echo "delete_".$i; ?>">Delete</a></span>        
    </p>
<?php
endfor;
?>
    <div id="temp-upload-image-space" class="<?php echo "#".(--$i) ?>"></div>
    <a href="javascript:void(0)" name="" id="add-more-image" ><?php echo Util::t("Add More Image"); ?></a>
    <script type="text/javascript">
        $("#add-more-image").click(function(){
            var newTempID = $("#temp-upload-image-space").attr("class").substring(1);
            $("#temp-upload-image-space").before("<p><span class='temp-title-class'></span><input type='file' name='images[]' class='temp-field-class' /><span> <a href='javascript:void(0)' class='delete-upload'>Delete</a></span></p>");            
            $("#temp-upload-image-space").attr("class", "#"+(++newTempID));
            
            $("span.temp-title-class").text("<?php echo Util::t("Upload Image "); ?>"+newTempID+" : ");
            $("input.temp-field-class").attr("id", "image_"+newTempID);
            
            //remove temp class
            $("span.temp-title-class").removeClass("temp-title-class");
            $("input.temp-field-class").removeClass("temp-field-class");
            
            uploadBlockStyle();
        });
        
        $("#show-hide-upload-block").click(function(){            
                if($("#upload-block").css("display") == "none"){
                    $("#upload-block").show("show");
                    $(this).text("Hide");
                }
                else{
                    $("#upload-block").hide("show");
                    $(this).text("Upload More Images");
                }
        });
        
        function uploadBlockStyle(){                
            if($("#upload-block")[0].scrollHeight){                
                $("#upload-block").scrollTop($("#upload-block")[0].scrollHeight);
                $("#upload-block").addClass("appand-upload-field");
            }           
        }
        
        function deleteUploadBlock(){
            $("a.delete-upload").live('click', function(){
                $(this).parent().parent().hide("show");
                $(this).parent().parent().remove();
            });
        }
        
        deleteUploadBlock();
    </script>
